<template>
  <div>
    <div class="el-message-box__wrapper" v-show="visible" style="z-index:200">
      <div v-bind:style="{width: width + 'px'}" class="el-message-box">
        <div class="el-message-box__header">  
          <div class="el-message-box__title">{{title}}</div>
          <i class="el-message-box__close el-icon-close" @click="close()"></i> 
        </div>
        <div class="el-message-box__content msg-box">
          <slot></slot>
        </div>
        <div class="el-message-box__btns">
          <el-button @click="handleCancel()">{{cancelText}}</el-button>
          <el-button type="primary" @click="handleSubmit()">{{sureText}}</el-button>
        </div>
      </div>
    </div>
    <div class="v-modal" v-show="visible" style="z-index:199" @click="visible = false">
    </div>   
  </div>
   
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: '温馨提示'
    },
    visible: {
      type: Boolean,
      default: false
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    sureText: {
      type: String,
      default: '确定'
    },
    cancelFun: Function,
    sureFun: Function,
    width: {
      type: Number,
      default: 420
    }
  },
  data () {
    return {}
  },
  methods: {
    close () {
      this.$emit('close')
    },
    handleSubmit () {
      this.$emit('confirm')
    },
    handleCancel () {
      this.$emit('cancel')
    }
  }
}
</script>
<style scoped lang="scss">
.msg-box{
  padding: 40px 20px;
}
</style>
